"use strict";

import { Button, AutoCenter, Grid, Space } from "antd-mobile";

import logo from '../../assets/logo.png'
import apple from '../../assets/apple.png'
import facebook from '../../assets/facebook.png'
import google from '../../assets/google.png'
import "./login.scss";

const Login = () => (
  <>
    <div className="page">
      <div className="page2">

        <AutoCenter>
          <Grid columns={1} >
            <div className="logdiv">
              <img src={logo}></img>
            </div>
          </Grid>
        </AutoCenter>
        <AutoCenter>
          <Grid columns={1} >
            <div className="welcome" >
              Welcome!
            </div>
          </Grid>
        </AutoCenter>
        <AutoCenter>
          <Grid columns={1} >
            <div className="title" >
              Discover interesting short videos. Share your moments with the CutG community
            </div>
          </Grid>
        </AutoCenter>

        <form action="/" method="post">
          <div className="form">
            <div className="formitem">
              <input name="username" placeholder="Username"></input>
            </div>
            <div className="formitem">
              <input type="password" name="passowrd" placeholder="Password"></input>
            </div>
          </div>
          <Button color='primary' size='large' className="sign-in">
            Sign In
          </Button>
        </form>


        <div className="icondiv">
          <div className="icon"><img src={apple}></img></div>
          <div className="icon"><img src={facebook}></img></div>
          <div className="icon"><img src={google}></img></div>
        </div>



      </div>

    </div>

  </>

);

export default Login;
